<template>
  <el-row class="el-row">
    <el-col :span="18" class="el-col">
      <h3>基于深度强化学习的共享出行智能决策模型及可视化模拟</h3>
      <!-- <img src="../assets/地图.png" alt="logo" height="36" width="36"> -->
    </el-col>
    <el-col :span="6" class="el-col">
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#409EFF"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">时空数据分析</template>
          <el-menu-item index="1-1" @click="sendMsg">订单OD数据</el-menu-item>
          <el-menu-item index="1-2" @click="dialogTableVisible = true">司机轨迹数据</el-menu-item>
        </el-submenu>
        <el-menu-item class="el-menu-item" index="2" @click="dialogArgumentVisible = true">智能决策模型</el-menu-item>
      </el-menu>
      <el-dialog title="强化学习" :visible.sync="dialogArgumentVisible">
        <div>
          <span class="demonstration">奖励衰减值：</span>
          <el-slider v-model="reward_decay" show-input :max="1" :step="0.1"></el-slider>
        </div>
        <div>
          <span class="demonstration">学习率：</span>
          <el-slider v-model="learning_rate" show-input :max="1" :step="0.1"></el-slider>
        </div>
        <div>
          <span class="demonstration">误差阈值：</span>
          <el-slider v-model="delta" show-input :max="0.2" :step="0.01"></el-slider>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogArgumentVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogArgumentVisible = false;sarsa();dialogProcessVisible=true;startProgress();"
          >确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="强化学习训练" :visible.sync="dialogProcessVisible">
        <el-progress :text-inside="true" :stroke-width="26" :percentage="progress_current"></el-progress>
        <span class="demonstration">预计还需要：{{time_expected}}</span>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogProcessVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-drawer title="司机统计信息" :visible.sync="dialogTableVisible" direction="btt" size="50%">
        <div class="block">
          <span class="demonstration">默认</span>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
        </div>
        <el-row type="flex" justify="center">
          <el-col :span="21">
            <el-table :data="driversTable" max-height="280" justify="center" :border="true">
              <el-table-column property="id" label="司机ID" width="300"></el-table-column>
              <el-table-column property="count_orders_before" label="订单总数（训练前）" width="150"></el-table-column>
              <el-table-column property="count_orders_after" label="订单总数（训练后）" width="150"></el-table-column>
              <el-table-column property="sum_time_cost_before" label="服务总时长（训练前）" width="200"></el-table-column>
              <el-table-column property="sum_time_cost_after" label="服务总时长（训练后）" width="200"></el-table-column>
              <el-table-column property="sum_reward_before" label="奖励总值（训练前）" width="150"></el-table-column>
              <el-table-column property="sum_reward_after" label="奖励总值（训练后）" width="150"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-drawer>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      reward_decay: 0.9, //奖励衰减值
      learning_rate: 0.1, //学习率
      delta: 0.1, //误差阈值
      dialogArgumentVisible: false, //强化学习参数对话框
      dialogProcessVisible: false, //强化学习进度条对话框
      dialogTableVisible: false, //司机表对话框
      msg: "fail",
      progress_current: 0.0, //当前进度
      progress_before: 0.0, //之前进度
      time_expected: "", //预计时间
      startTimer: "", //开始轮询
      endTimer: "", //结束轮询
      driversTable: null, //司机表
      value1: ""
    };
  },
  methods: {
    sarsa() {
      this.$ajax
        .post("/sarsa", {
          reward_decay: this.reward_decay,
          learning_rate: this.learning_rate
        })
        .then(successResponse => {
          this.$alert(successResponse, "后端响应");
        });
    },
    test() {
      this.$ajax
        .get("/getMsg", {})
        .then(res => {
          this.msg = res.data.msg;
          this.$alert(this.msg, "访问后端接口");
        })
        .catch(error => {
          this.$alert(this.msg + ": " + error, "访问后端接口");
        });
    },
    progress() {
      this.$ajax.get("/progress", {});
    },
    startProgress() {
      this.startTimer = setInterval(() => {
        this.$ajax.get("/show_progress", {}).then(res => {
          this.progress_current = res.data.progress;
          this.progress_current = this.progress_current.toFixed(2); //保留两位小数
          let hours = 0;
          let minutes =
            (100 - this.progress_current) /
            (this.progress_current - this.progress_before) /
            60;
          minutes = parseInt(minutes); //保留整数
          if (minutes > 60) {
            hours = parseInt(minutes / 60);
            minutes = parseInt(minutes % 60);
          }
          this.time_expected = hours + "小时" + minutes + "分钟";
          this.progress_before = this.progress_current;
        });
        if (this.progress_current > 85) {
          clearInterval(this.startTimer);
          this.endProgress();
        }
      }, 1000);
    },
    endProgress() {
      this.endTimer = setInterval(() => {
        this.$ajax.get("/show_progress", {}).then(res => {
          this.progress_current = res.data.progress;
          this.progress_current = this.progress_current.toFixed(2); //保留两位小数
          let hours = 0;
          let minutes =
            (100 - this.progress_current) /
            (this.progress_current - this.progress_before) /
            60;
          minutes = parseInt(minutes); //保留整数
          if (minutes > 60) {
            hours = parseInt(minutes / 60);
            minutes = parseInt(minutes % 60);
          }
          this.time_expected = hours + "小时" + minutes + "分钟";
          this.progress_before = this.progress_current;
        });

        if (this.progress_current > 99) {
          clearInterval(this.endTimer);
          this.finishProgress();
        }
      }, 10);
    },
    finishProgress() {
      this.$emit("finishProgress", false);
    },
    getDrivers() {
      this.$ajax.get("/select/drivers", {}).then(res => {
        this.driversTable = res.data;
      });
    },
    //显示侧边栏
    sendMsg() {
      //注册事件，向父组件传值
      this.$emit("func", true);
    }
  },
  mounted() {}
};
</script>

<style scoped>
.el-table,
h3 {
  margin: auto !important;
}

.el-row,
.el-col,
.el-menu,
.el-menu-item {
  height: 40px !important;
}

.el-menu-item,
h3 {
  line-height: 40px !important;
}
</style>

<style>
.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 60px;
  line-height: 40px !important;
}
</style>
